import { ReactiveProperty } from './../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { _decorator, Component, Node, Label, Button } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { instantiate } from 'cc';
import { Sprite } from 'cc';
import { Color } from 'cc';
import { Colors } from '../../game/basic';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { EditorStageView } from './EditorStageView';
import { nc } from '../../../../scripts/libs/rxjs/NotificationCenter';
import { EditorBlock } from './EditorBlock';
const { ccclass, property } = _decorator;

@ccclass('EditorBlockExplorerItem')
export class EditorBlockExplorerItem extends BaseView {

    editorStageView: EditorStageView = null;

    editorBlock = ReactiveProperty.Create<EditorBlock>(null);

    @property(Label)
    blockIdLabel: Label = null;

    @property(Label)
    shapeIdLabel: Label = null;

    @property(Label)
    groupIdLabel: Label = null;

    @property(Label)
    layerLabel: Label = null;

    @property(Label)
    colorLabel: Label = null;

    @property(Sprite)
    colorSprite: Sprite = null;

    @property(Button)
    selfButton: Button = null;

    @property(Node)
    focusNode: Node = null;

    useObserves() {
        return [
            this.editorBlock.subscribe(this.refresh.bind(this)),
            BindButton(this.selfButton).subscribe(this.selfButtonClicked.bind(this)),
            nc.subscribe('block_inspector_change', this.refreshFocus.bind(this)),
        ];
    }

    onDestroyView(): void {
    }

    refresh() {
        if (this.editorBlock.value != null) {
            // if (this.editorBlock.value.nails.value != null) {
            //     for (let i = 0; i < this.editorBlock.value.nails.value.length; i++) {
            //         let nail = this.editorBlock.value.nails.value[i];
            //         let itemNode = instantiate(this.itemPrefabNode);
            //         itemNode.getComponent(Sprite).color = Colors[nail];
            //         this.container.addChild(itemNode);
            //     }
            // }

            this.blockIdLabel.string = `${this.editorBlock.value.blockId.value}#`;
            this.shapeIdLabel.string = `S${this.editorBlock.value.shapeId}`;
            this.layerLabel.string = `L${this.editorBlock.value.layer.value}`;
            this.groupIdLabel.string = `G${this.editorBlock.value.group.value}`;

            this.colorLabel.string = `C${this.editorBlock.value.colorId}`;
            this.colorSprite.color = Colors[this.editorBlock.value.colorId];
        }
        this.refreshFocus();
    }

    refreshFocus() {
        this.focusNode.active = this.editorStageView.blockInspectorMap.has(this.editorBlock.value?.blockId.value);
    }

    selfButtonClicked() {
        if (this.editorBlock.value != null) {
            this.editorStageView.tryOpenBlockInspector(this.editorBlock.value.blockId.value);
        }
    }

}

